<template>
  <div class="pro-file app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>布局配置项</span>
      </div>
      <div class="drawer-item">
        <span>展示标题栏</span>
        <el-switch v-model="tagsView" class="drawer-switch" />
      </div>

      <div class="drawer-item">
        <span>固定标题栏</span>
        <el-switch v-model="fixedHeader" class="drawer-switch" />
      </div>

      <div class="drawer-item">
        <span>展示侧边栏图标</span>
        <el-switch v-model="sidebarLogo" class="drawer-switch" />
      </div>
    </el-card>
  </div>
</template>

<script>
/**
 * @author lixiangjian
 */
export default {
  computed: {
    fixedHeader: {
      get() {
        return this.$store.state.settings.fixedHeader;
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'fixedHeader',
          value: val
        });
      }
    },
    tagsView: {
      get() {
        return this.$store.state.settings.tagsView;
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'tagsView',
          value: val
        });
      }
    },
    sidebarLogo: {
      get() {
        return this.$store.state.settings.sidebarLogo;
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'sidebarLogo',
          value: val
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .box-card {
  .el-card__body {
    display: flex;
    .drawer-item {
      margin: 10px;
    }
  }
}
</style>
